<template>
  <el-card>
    <el-table :data="skuList" border style="width: 100%">
      <el-table-column label="序号" width="180" type="index"> </el-table-column>
      <el-table-column prop="skuName" label="名称" width="180">
      </el-table-column>
      <el-table-column prop="skuDesc" label="描述"> </el-table-column>
      <el-table-column label="默认图片" align="center">
        <template v-slot="{ row }">
          <img :src="row.skuDefaultImg" alt="" width="60%" />
        </template>
      </el-table-column>
      <el-table-column prop="weight" label="重量(KG)" align="center">
      </el-table-column>
      <el-table-column prop="price" label="价格(元)"> </el-table-column>
      <el-table-column prop="address" label="操作" width="270px">
        <template v-slot="{ row, $index }">
          <el-tooltip content="上架" v-if="row.isSale === 1">
            <el-button
              icon="el-icon-upload2"
              size="mini"
              type="info"
              @click="toSale(row, $index)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="下架" v-else>
            <el-button
              icon="el-icon-download"
              size="mini"
              type="warning"
              @click="canceletosale(row, $index)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="修改spu">
            <el-button icon="el-icon-edit" size="mini" type="primary"></el-button>
          </el-tooltip>
          <el-tooltip content="查看spu">
            <el-button
              icon="el-icon-warning-outline"
              size="mini"
              type="info"
              @click="getOnesku(row)"
            ></el-button>
          </el-tooltip>
          <el-tooltip content="删除">
            <el-button icon="el-icon-delete" size="mini" type="danger" @click="todelSku(row,$index)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10,15,20,30]"
      :page-size="pageSize"
      layout=" prev, pager, next, jumper,->,sizes, total"
      :total="total"
      :small="small">
    </el-pagination>
    <el-drawer
      :title="spulist.skuName"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div>
        <span>手机价格:{{ spulist.skuName }}</span>
      </div>
      <div>
        <span>手机描述:{{ spulist.skuDesc }}</span>
      </div>
      <div>
        <span>手机价格:{{ spulist.price }}</span>
      </div>
      <div>
        <span>商品编码:{{ spulist.price }}</span>
      </div>
      <div>
        <el-carousel indicator-position="outside">
          <el-carousel-item
            v-for="skuImg in spulist.skuImageList"
            :key="skuImg.id"
          >
            <el-image :src="skuImg.imgUrl" style="width: 100%;height: 100%;"></el-image>
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-drawer>
  </el-card>
</template>

<script>
import {
  reqgetBaseSku,
  reqCancelsale,
  reqTosale,
  reqGetonespu,
  reqDelonesku,
} from "@/api/product/sku";
export default {
  data() {
    return {
      skuList: [],
      pageSize: 10,
      currentPage: 1,
      drawer: false,
      direction: "rtl",
      spulist: [],
      total:0,
      small:false
    };
  },
  methods: {
    //获取skuinfo数据
    async getSkulist() {
      const result = await reqgetBaseSku(this.currentPage, this.pageSize);
      console.log(result);
      if (result.code === 200) {
        this.skuList = result.data.records;
        this.total = result.data.total
      }
    },
    //上架业务函数
    async toSale({ id }, index) {
      const result = await reqTosale(id);
      console.log(id);
      if (result.code === 200) {
        this.skuList[index].isSale = 0;
      }
    },
    //下架的业务函数
    async canceletosale({ id }, index) {
      const result = await reqCancelsale(id);
      if (result.code === 200) {
        this.skuList[index].isSale = 1;
      }
    },
    //根据id获取sku数据
    async getOnesku({ id }) {
      const result = await reqGetonespu(id);

      console.log(result);
      if (result.code === 200) {
        this.spulist = result.data;
        this.drawer = true;
      }
    },
    //关闭抽屉的业务函数
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    //删除一条sku数据
    async todelSku({id},index){
        this.$confirm('此操作将永久删除该商品, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          await reqDelonesku(id)
          this.getSkulist()
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    handleSizeChange(val) {
        this.pageSize = val
        this.currentPage=1
        this.getSkulist()
    },
      handleCurrentChange(val) {
        this.currentPage = val
        this.getSkulist()
    },
    
  },

  mounted() {
    this.getSkulist();
  },
};
</script>

<style>
</style>